<template>
  <div class="map_box" @click.stop="stopKeyDetail()">

    <!--城东设计的最新思路右键盘点击网格员弹出框-->

    <div class="mapLeft" :style="{ 'z-index':leftMapStatus,position: 'absolute'}">
      <div id="mapLeft"></div>
    </div>


   <div class="total_all_groups" :style="{'--activeColor':this.$util.storage.get('color')}">
        <div class="total_all_top">
          <div class="tatal_all_left"><span class="pd">总户数：{{total_home.totalHome}}户</span></div>
          <div class="tatal_all_right"><span class="pd">总人数：{{total_home.totalMember}}人</span></div>
        </div>
        <div class="total_all_bottom">
          <div class="tatal_all_left"><span class="pd">男&emsp;性：{{total_sex.totalMemberMan}}人</span></div>
          <div class="tatal_all_right"><span class="pd">女&emsp;性：{{total_sex.totalMemberWoman}}人</span></div>
        </div>
   </div>


     <div class="new_gird" v-if="click_flag" :style="{'--activeColor':this.$util.storage.get('color')}">
       <div class="right">
           <div class="new_gird_tab" style="position: relative">
            <!--返回按钮-->
            <i @click.stop="GoBack()" class="iconfont iconback" style="font-size: 22px;color:black;position: absolute;z-index: 9999;left: 15px;top: 5px"></i>

            <!--返回按钮-->
             <!--<div class="tabs">-->
                 <!--<div class="tab"></div>-->
               <!--</div>-->
               <div class="tabs">
                 <div class="tab"></div>
               </div>
                <div class="tabs">
                 <div class="tab active_tab">基本信息</div>
               </div>
                  <div class="tabs">
                 <div class="tab"></div>
               </div>
               <!--<div @click.stop="switechTab(index)" class="tabs" v-for="(item,index) in new_titles">-->
                  <!--<div :class="index==tabative?'tab active_tab':'tab'">{{item}}</div>-->
               <!--</div>-->
               <!--<div class="tabs">-->
                 <!--<div class="tab"></div>-->
               <!--</div>-->
           </div>

           <div class="new_gird_message" v-if="baseFlag">

                <div class="message_top">

                       <div class="top_left">
                    <span class="left_data">所属网格：{{grid_title}}</span>
                    <span class="left_data"><span style="letter-spacing: 12px;">职务</span>：{{newGrider.roles}}</span>
                    <span class="left_data"><span style="letter-spacing: 12px;">姓名</span>：{{newGrider.name}}</span>
                    <span class="left_data">手机：{{newGrider.mobile}}</span>

                  </div>

                   <div class="top_right">
                     <span class="left_data" style="padding-left: 40px;">总户数：{{home.totalHome}}户</span>
                     <span class="left_data" style="padding-left: 40px;">总人数：{{home.totalMember}}人</span>
                     <span class="left_data" style="padding-left: 40px;">男性&emsp;：{{sex.totalMemberMan}}人</span>
                     <span class="left_data" style="padding-left: 40px;">女性&emsp;：{{sex.totalMemberWoman}}人</span>
                    <!--<img style="width: 82px;height: 111px;" src="../../../assets/images/datacenter/nvshen.png" alt="暂无图片资源">-->
                  </div>


                  <div class="top_center">
                     <img style="width: 82px;height: 111px;" :src="newGrider.pic?newGrider.pic:'/static/header.png'" alt="暂无图片资源">
                  </div>


                </div>
                <div style="padding: 12px;" >
                  <table class="gird_table">
                   <thead>
                    <tr v-if="!nonextLevel" >
                      <td>姓名</td>
                      <td>职务</td>
                      <td>电话</td>
                      <td>详情</td>
                    </tr>
                   </thead>
                <tbody class="grid_tbody" style="width: 364px;height: 180px;position: relative">
                    <tr v-for="item in gird_yuan" @click.stop="checkGirdermore(item)">
                      <td>{{item.name}}</td>
                      <td>{{item.roles}}</td>
                      <td>{{item.mobile}}</td>
                      <td class="check_detail_color" @click.stop="checkGirdermore(item)">网格详情</td>
                    </tr>
                </tbody>
                  </table>

                </div>
           </div>

           <div class="new_gird_message" v-if="renflag">
                    <div class="total">
                        <div class="total_top">
                             <div class="total_top_left"><span class="total_text">总户数：{{home.totalHome}}户</span></div>
                             <div class="total_top_right"><span class="total_text">总人数：{{home.totalMember}}人</span></div>
                        </div>
                        <div class="total_bottom">
                          <div class="total_top_left"> <span class="total_text">男&emsp;性：{{sex.totalMemberMan}}人</span></div>
                          <div class="total_top_right"><span class="total_text">女&emsp;性：{{sex.totalMemberWoman}}人</span></div>
                        </div>
                    </div>
                    <div class="keys" style="padding: 12px;">
                      <table class="gird_table">
                      <thead>
                        <tr>
                          <td>人员类别</td>
                          <td>数量</td>
                          <td>详情</td>
                        </tr>
                      </thead>
                      <tbody style="width: 364px;height: 265px;position: relative">
                        <p v-if="nodataRen" style="font-size: 20px;color: #cccccc;position: absolute;z-index: 9999;left: 50%;top: 50%;transform: translate(-50%,-50%);">暂无更多人员信息...</p>
                        <tr  v-for="item in keygroups">
                          <td>{{item.tags_name}}</td>
                          <td>{{item.num}}</td>
                          <td class="check_detail_color" @click.stop="checkKeysDetail2(item)" >查看详情</td>
                        </tr>
                      </tbody>
                      </table>


                    </div>

           </div>
       </div>

     </div>

    <!--城东设计的最新思路右键盘点击网格员弹出框-->

    <div class="new_gird"  v-if="first_flag" :style="{'--activeColor':this.$util.storage.get('color')}">
      <div class="new_gird_tab">

        <div class="tabs">
        <div class="tab"></div>
        </div>
        <div class="tabs">
        <div class="tab">人员信息</div>
        </div>
        <div class="tabs">
          <div class="tab"></div>
        </div>
      </div>
      <div class="new_gird_message">
        <div class="total">
          <div class="total_top">
            <div class="total_top_left"><span class="total_text">总户数：{{home.totalHome}}户</span></div>
            <div class="total_top_right"><span class="total_text">总人数：{{home.totalMember}}人</span></div>
          </div>
          <div class="total_bottom">
            <div class="total_top_left"><span class="total_text">男&emsp;性;：{{sex.totalMemberMan}}人</span></div>
            <div class="total_top_right"><span class="total_text">女&emsp;性;：{{sex.totalMemberWoman}}人</span></div>
          </div>
        </div>
        <div class="keys">
          <div class="keys" style="padding: 12px;">

            <table class="gird_table">
              <thead>
                  <tr>
                    <td>人员类别</td>
                    <td>数量</td>
                    <td>详情</td>
                  </tr>
              </thead>

              <tbody style="width: 364px;height: 265px;position: relative">
              <p v-if="nodataRen" style="font-size: 20px;color: #cccccc;position: absolute;z-index: 9999;left: 50%;top: 50%;transform: translate(-50%,-50%);">暂无更多人员信息...</p>
                    <tr  v-for="item in keygroups">
                      <td>{{item.tags_name}}</td>
                      <td>{{item.num}}</td>
                      <td class="check_detail_color" @click.stop="checkKeysDetail2(item)" >查看详情</td>
                    </tr>
              </tbody>

            </table>


          </div>


        </div>


      </div>

    </div>


    <!--查看人员信息-->
    <div class="key_details_list" v-if="keydetailflag">

      <div class="key_details_list_top">
           <div class="d_col">编号</div>
           <div class="d_col">姓名</div>
           <div class="d_col" style="flex: 2;">身份证号码</div>
           <div class="d_col">性别</div>
           <div class="d_col">民族</div>
           <div class="d_col" style="flex: 4">住址</div>
      </div>
      <div class="key_details_list_bottom">
            <div class="row" v-for="(item,index) in keyDetails">
              <div class="d_col1">{{index+1}}</div>
              <div class="d_col1">{{item.name}}</div>
              <div class="d_col1" style="flex: 2">{{item.idcard}}</div>
              <div class="d_col1">{{item.sex}}</div>
              <div class="d_col1">汉</div>
              <div class="d_col1" style="flex: 4">{{item.committees}}</div>
            </div>

      </div>


    </div>

    <!--查看人员信息-->

    <!--新设计的网格员逻辑-->

    <!-- 村民信息 -->
      <div class="show new_dialog cunmins" v-if="people_flags">
        <span class="cm_title" style="border-bottom: 1px solid #ccc;width: 100%;display: block;padding-bottom: 15px;text-align: center">网格数据</span>
        <table>
          <thead>
          <tr>
            <td  class="title_tr" v-if="!homeFlag">
              户主姓名
            </td>

            <td   class="title_tr" v-for="title in titles">
                {{title.title}}
            </td>

          </tr>
          </thead>

          <tbody style="position: relative">
          <p v-if="homeFlag" style="font-size: 60px;position: absolute;color: #cccccc;z-index: 999;left: 559px; top: 257px;">暂无数据...</p>

          <tr v-for="v in people">
            <td class="jiating" style="padding-left: 23px">{{v.name}}</td>
            <td class="table_data_color" v-for="cat in v.catList">{{cat.num|null2Text}}件</td>
          </tr>
          </tbody>
        </table>
        <div class="close closeCunmin" @click="closePeoplePopup">×</div>
      </div>

    <!-- 村民信息 -->
    <div class="new_dialog_box" v-if="new_flag">

      <div :class="grid_message_flag?'new_dialog fade_color':'new_dialog'">
        <div class="new_dialog_top">
          <span class="gird_manager_title">网格人员</span>
          <span class="close_new_dialog" @click.stop="newClose">×</span>
        </div>
        <div class="new_dialog_bottom">
          <div class="new_dialog_left">

          </div>
          <div class="new_dialog_center">
            <div class="row_box" v-if="son_flag">
              <!--无限级第三层-->
              <div class="row2" style="height: 671px;overflow-y: scroll;">
                <div @click="checkSecondMessage(item3.id)" class="row_grider two_inner"  style="margin-bottom: 20px;height: 300px;" v-for="item3 in grid_users">

                  <img class="pic" :src="item3.pic?item3.pic:'/static/headimg.png'" alt="暂无图片！">
                  <!--<div class="role"></div>-->
                  <div class="nick_name">{{item3.name}}&nbsp;&nbsp;{{item3.roles}}</div>
                  <div class="mobile">{{item3.mobile}}</div>
                  <!--<div class="check_button" @click="checkSecondMessage(item3.id)">查看网格</div>-->
                </div>
              </div>
              <p v-if="nodata" style="font-size: 60px;color: #cccccc;position: absolute;left: 50%;top:40%;transform:translateY(-50);transform:translateX(-50%)">暂无更多网格信息</p>
              <!--无限级第三层-->
            </div>

            <div v-else class="row_box" v-for="item in limitDatas" style="height: 680px;overflow-y: scroll;">
                    <!--无限级第一层-->
                    <div class="row" style="height: 345px;">
                            <div class="row_grider" style="height: 300px;">
                                   <img class="pic" :src="item.pic?item.pic:'/static/headimg.png'" alt="暂无图片资源！">
                                   <!--<div class="role" style="color:#12a6e4;  border: 1px solid #12a6e4; ">{{item.roles}}</div>-->
                                   <div class="nick_name">{{item.name}}&nbsp;&nbsp;{{item.roles}}</div>
                                   <div class="mobile">{{item.mobile}}</div>
                            </div>
                       </div>
                    <!--无限级第一层-->
                    <!--无限级第二层-->
                    <div class="row2">
                          <div @click="checkSecondMessage(item2.id)" class="row_grider two_inner" style="height: 300px;"  v-for="item2 in item.son">
                            <img class="pic" :src="item2.pic?item2.pic:'/static/headimg.png'" alt="暂无图片资源！">
                            <!--<div class="role">{{item2.roles}}</div>-->
                            <div class="nick_name">{{item2.name}}&nbsp;&nbsp;{{item2.roles}}</div>
                            <div class="mobile">{{item2.mobile}}</div>
                            <!--<div class="check_button" @click="checkSecondMessage(item2.id)">查看网格</div>-->
                          </div>

                        </div>
                    <!--无限级第二层-->
            </div>




          </div>
          <div class="new_dialog_right">
            <div v-if="work_staus" v-for="(item,index) in dutys" :key="index" class="new_girds" @click.stop="checkGridWorkMessage(item)">
              {{item.title}}
            </div>
            <!--<div class="new_girds">-->
              <!--网格员职责-->
            <!--</div>-->
            <!--<div class="new_girds">-->
              <!--单元长职责-->
            <!--</div>-->

          </div>
        </div>
      </div>

      <!--查看网格长职责弹窗-->
      <div class="girdWorkMessage" v-if="grid_message_flag">
        <div class="gwm_top">
          <span class="gird_manager_title">网格长职责</span>
          <span class="close_new_dialog" @click.stop="workClose">×</span>
        </div>
        <div class="gwm_bottom">
          <!--富文本区域-->
          <p v-for="item in dutyContent">{{item}}</p>
          <!--富文本区域-->
        </div>
      </div>
      <!--查看网格长职责弹窗-->

    </div>


    <!--新设计的网格员逻辑-->
    <div id="mapDiv" v-if="true"></div>
<!--    <span style="font-size: 60px" @click="addPolygonClick()">注册</span>-->
<!--    <span style="font-size: 60px" @click="removePolygonClick()">移除</span>-->

    <!-- 网格长 -->
    <div v-if="flag" style="" class="mask" @click.stop="HiddenMask">
      <div class="show">
        <span style="color: black;font-weight: bold;font-family: 微软雅黑;font-size: 28px;padding-bottom: 10px;">{{mainInfo.roles}}</span>
        <img class="headimg" :src="mainInfo.pic?mainInfo.pic:'/static/header.png'" />
        <div style="margin-top: 10px;">姓名：{{mainInfo.name}}</div>
        <div>手机号：{{mainInfo.mobile}}</div>
        <div style="background: #12a6e4;border-radius: 8px;width: 173px;text-align: center;margin-top: 10px;"><a style="color: white;" @click.stop="onNextLevel(mainInfo.id)">查看网格员</a></div>
        <div class="close closeCunmin" @click.stop="closePopup">×</div>
      </div>
    </div>

    <!-- 网格员 -->
    <div v-if="sub_flag" style="" class="mask" @click.stop="HiddenMask">
      <div class="show">
        <span style="text-align:center;color: black;font-weight: bold;font-family: 微软雅黑;font-size: 28px;padding-bottom: 10px;border-bottom: 1px solid #ccc;width: 310px;margin-bottom: 15px;">
              <span v-if="sub.length > 0">
              {{sub[0].roles}}
              </span>
        </span>

        <div class="show_box">
          <div class="show_box_contain"  v-for="v in sub" >
              <img class="headimg" :src="v.pic?v.pic:'/static/headimg.png'" />
              <div style="margin-top: 10px;">姓名：{{v.name}}</div>
              <div>手机号：{{v.mobile}}</div>
              <div style="background: #12a6e4;border-radius: 8px;width: 173px;text-align: center;margin-top: 10px;margin-bottom: 10px;"><a a style="color: white;" @click.stop="onNextLevel(v.id)">网格数据</a></div>
          </div>
          <div class="close closeCunmin" @click.stop="closeSubPopup">×</div>

        </div>

      </div>
    </div>


    <!-- 村民信息 -->
    <div v-if="people_flag" style="" class="mask" @click.stop="HiddenMask">
      <div class="show cunmin">
        <span class="cm_title" style="border-bottom: 1px solid #ccc;width: 100%;display: block;padding-bottom: 15px;text-align: center">网格数据</span>
        <table>
          <thead>
            <tr>
              <td  class="title_tr">
                家庭名称
              </td>
              <td   class="title_tr">
                家庭积分
              </td>
              <td   class="title_tr" v-for="title in titles">
                {{title.title}}
              </td>

            </tr>
          </thead>

          <tbody>
            <tr v-for="v in people">
              <td class="jiating">{{v.name}}的家庭</td>
              <td class="table_data_color">{{v.available_score|null1Text}}分</td>
              <td class="table_data_color" v-for="cat in v.catList">{{cat.num|null2Text}}件</td>
            </tr>
          </tbody>
        </table>
        <div class="close closeCunmin" @click="closePeoplePopup">×</div>
      </div>
    </div>

  </div>
</template>

<script>
  //import default_img from '/static/headimg.png'
  import Pages from "../../pages/index";
  export default {
    name: "gridMap",
    data() {
      return {
        //城东的新逻辑
        new_titles:['基本信息','人员信息'],
        tabative:0,//激活项，默认为0,
        first_flag:false,//默认加载显示第一个
        click_flag:false,//点击地图弹出默认不显示
        baseFlag:true,//基本信息为true，
        renflag:false,//人员信息，默认为fakse
        total_home:{},//全村的统计数据
        total_sex:{},//全村的统计数据
        home:{},//家庭信息
        sex:{},//男女比列
        keygroups:[],//重点人群数组
        keyDetails:[],//重点人群详情
        keydetailflag:false,//重点人群弹出框，默认不显示
        grid_title:'',
        gid:0,
        main_id:0,
        newGrider:[],
        gird_yuan:[],
        nonextLevel:false,//是否显示暂无更多网格
        nodataRen:false,//如果没有更多人员信息时候显示
        pid:null,//根据pid查询数据并返回
        firstGrid:[],//第一层最高的网格长
        firstGirdyuan:[],//第一层下的网格员们
        homeFlag:false,//是否显示家庭积分暂无数据

        // 新逻辑的属性
        work_staus:true,//是否隐藏工作职责
        people_flags: false,
        nodata:false,//没有等多了
        grid_users:[],
        son_flag:false,//是否显示二级无线级查看的详情
        new_flag:false,//是否显示新的逻辑弹窗
        grid_message_flag:false,//是否显示查看新的网格人员信息的弹出框
        limitDatas:[],//无限级菜单数组
        dutys:[],//管理人员职责
        dutyContent:'',//管理人员职责内容
        // 新逻辑的属性


        polygons:[],
        map: {},

        mainInfo: {
          pic: ''
        }, // 网格长信息

        flag: false,//是否显示弹框，默认不显示
        jingdu: 0,//经度
        weidu: 0,//纬度

        data: [],

        sub: [],
        sub_flag: false,

        people: [],
        titles: [],
        people_flag: false,

        leftMapStatus: 0,
        currentAreaPoints: []
      }
    },

    components:{
      Pages
    },

    created() {
      this.$emit("childData",this.$route.query.childdata);
      this.getDutyList();
      this.getLimitMenu();
      this.firstLoadHomeMessage();
      window.openInfoWindow = this.openInfoWindow;
    },
    mounted() {
      this.loadmap();
      // this.addPolygonClick();
      new T.Map("mapLeft");
    },
    methods: {
      checkSecondMessage(id){
        console.log('二层网格id',id);
        let that = this;
        that.work_staus=false;
        that.son_flag=true;
        that.$http.get("/api/GriderPcApi/getGriderYList?id="+id, null, r=>{
            console.log('网格信息：',r.data);
            that.grid_users=r.data;
            if (r.data.length==0) {
              that.$http.get("api/GriderPcApi/getGriderHomeList?id=" + id + "&vollege_id=" + that.$util.vollege_id, null, k=>{
                console.log("家庭信息", k);
                that.people_flags = true;


                that.people = k.data;
                this.nodata=true;
                if (that.people.length > 0) {
                  that.titles = that.people[0].catList
                }
              });
            }
        });
      },

      getDutyList(){
         this.$http.get("api/GriderPcApi/getGriderRoleList?vollege_id="+this.$util.vollege_id,null,r=>{
           // console.log('网格员职责：',r);
           this.dutys=r.data;
         });
      },//获得管理人员职责


      getLimitMenu(id){
        let that = this;
        this.$http.get("api/GriderPcApi/getGriderAll?vollege_id="+this.$util.vollege_id,null,r=>{
          console.log('无线级菜单列表：',r.data);
          for (var i = 0; i <= r.data.length - 1; i++) {
            if (r.data[i].id == id) {
              console.log(r.data[i]);
              that.limitDatas = [r.data[i]];
            }
          }
        });
      },//获取无限级的菜单列表

      newClose(){
        this.new_flag=false;
      },
      checkGridWorkMessage(item){
        console.log('查看网格员信息！',item);
        this.dutyContent=item.content.replace(/\n/g, "|-&").split("|-&");
        console.log('this.dutyContent',this.dutyContent);
        this.grid_message_flag=!this.grid_message_flag;
      },
      workClose(){
        this.grid_message_flag=!this.grid_message_flag;
      },

      filter(v) {
        return 1;
      },

      loadLeftMap(center, points, color,bigPoint) {
        let map = new T.Map("mapLeft");
        this.leftMap = map;
        map.centerAndZoom(center, 15);
        //创建面对象
        let polygon = new T.Polygon(points, {
          color: "#ccc", weight: 2, lineStyle: "dashed", opacity: 1, fillColor: color, fillOpacity: 0.4
        });

        //在地图上显示头像
        let headimg = new T.Icon({
          iconUrl: bigPoint.grider.pic?bigPoint.grider.pic:"/static/header.png",
          iconSize: new T.Point(34, 34),
          iconAnchor: new T.Point(17, 48)
        });
        let marker = new T.Marker(center, {icon: headimg});
        map.addOverLay(marker);
        //在地图上显示头像

        // //弹出框信息
        let infoWin = new T.InfoWindow();
        infoWin.setLngLat(center);
        let content =
          "<div style='padding:13px 19px;border-radius: 8px;'>" +
          "<div>"+bigPoint.title+"：" + bigPoint.grider.name +
          "</div>" +
          "</div>";
        infoWin.setContent(content);
        map.addOverLay(infoWin);
        // //弹出框信息



        map.addOverLay(polygon);
        map.setViewport(points);
      },

      loadmap() {
        let that = this;
        let map = new T.Map("mapDiv");
        that.map = map;

        //设置显示地图的中心点和级别
        let jwd = that.$util.storage.get("jwd");
        jwd = jwd.split(",");
        map.centerAndZoom(new T.LngLat(jwd[0], jwd[1]), 15);
        //允许鼠标双击放大地图
        map.enableScrollWheelZoom();
        // that.$emit("childData",0);
        // 颜色定义
        // let area_color = ["#df1a1a","#8058ff","#69d5dd","#2b95ff","#02c070","#43e800","#9138ff","#a6c152","#3abfc4","#d5e025","#e0b225","#e025bf"];
        let area_color = ["#df1a1a","#8058ff","#69d5dd","#2b95ff","#02c070","#43e800","#9138ff","#a6c152","#3abfc4","#d5e025","#e0b225","#e025bf","#e02581","#e02555","#e02529","#a525e0","#25e0bf","#25e074","#bfe025","#8fe025","#d9e025"];
        that.$http.get("api/GriderPcApi/getGridList?vollege_id="+that.$util.vollege_id, null, r=>{
          console.log("地图信息：",r.data);
          that.data = r.data;
          let centerArr = [];
          let centerPoints = [];

          // 绘制网格长地图数据
          for (var i = 0; i <= that.data.length - 1; i++) {

            let bigPoint = that.data[i];

            let color = area_color[i];

            for (var j = 0; j <= that.data[i].area_arr.length - 1; j++) {

              let pointW = that.data[i].area_arr[j];
              let points = [];

              let center = new T.LngLat(pointW.center_n, pointW.center_t);

              centerPoints.push(center);

              let points_arr = pointW.area_arr;

              //向地图上添加面
              for (var k = 0; k <= points_arr.length - 1; k++) {
                let point = points_arr[k];
                let p = new T.LngLat(point[0], point[1]);
                centerPoints.push(p);
                points.push(p);

              }

              console.log("POINTS", points);

              //创建面对象
              let polygon = new T.Polygon(points, {
                color: color, weight: 2, lineStyle: "dashed", opacity: 1, fillColor: color, fillOpacity: 0.4
              });
              map.addOverLay(polygon);

              let headimg = new T.Icon({
                  iconUrl: bigPoint.grider.pic?bigPoint.grider.pic:"/static/header.png",
                  iconSize: new T.Point(34, 34),
                  iconAnchor: new T.Point(17, 48)
              });
              let marker = new T.Marker(center, {icon: headimg});
              map.addOverLay(marker);

              centerArr.push(center);
              let main_id = bigPoint.main_id;


              let param = {
                bigPoint: bigPoint,
                center: center,
                points: points,
                color: color
              }

              marker.addEventListener("click", function () {
                that.openInfoWindow(param);
              });

              // //弹出框信息
              let infoWin = new T.InfoWindow();
              infoWin.setLngLat(center);

              let param1 = JSON.stringify(param).replace(/\"/g,"'");
              let content =
                  "<div style='padding:13px 19px;'onclick=\"openInfoWindow("+param1+")\">" +
                  "<div>"+bigPoint.title+"：" + bigPoint.grider.name +
                  "</div>" +
                  "</div>";
              infoWin.setContent(content);
              map.addOverLay(infoWin);


              // // 弹出信息
              polygon.main_id = main_id; // 网格长ID
              polygon.points = points;
              polygon.center = center;
              polygon.bigPoint = bigPoint;
              polygon.removeEventListener("click", this.PolygonClick);
              polygon.addEventListener("click", this.PolygonClick);

            }
          }

          map.setViewport(centerPoints);

        });


        var ctrl = new T.Control.MapType([
          {
            title: "地图", //地图控件上所要显示的图层名称
            icon: "http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png", //地图控件上所要显示的图层图标（默认图标大小80x80）
            layer: TMAP_NORMAL_MAP //地图类型对象，即MapType。
          },
          {
            title: "卫星混合",
            icon:
              "http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellitepoi.png",
            layer: TMAP_HYBRID_MAP
          }
        ]);

        that.map.addControl(ctrl);

      },

      shoWinInfo(lnglat){
        that.map.addOverLay(infoWin);
      },

      // 点块事件
      PolygonClick(e) {
        console.log("网格信息", e);
        // let main_id = e.target.main_id;
        // let that = this;
        // that.$http.get("api/GriderPcApi/getGriderZInfo?id="+main_id, null, r=>{

        //   console.log("网格长信息", r.data);
        //   that.mainInfo = r.data;
        //   that.flag = !that.flag;
        // });
        // console.log('查看网格信息！');
        // let main_id = e.target.main_id;
        //
        // this.son_flag=false;
        // this.nodata=false;
        // this.work_staus=true;
        // this.new_flag = true;
        //
        // this.getLimitMenu(main_id);
        // console.log('网格对象的图片！：',e.target.bigPoint.grider.pic);
        this.leftMapStatus = 999;
        this.loadLeftMap(e.target.center, e.target.points, e.target.options.color,e.target.bigPoint);

        let bigPoint = e.target.bigPoint
        let that = this;
        console.log("bigPoint:",bigPoint);
        that.click_flag=true;
        that.first_flag=false;
        that.nonextLevel=false;

        that.gid = bigPoint.id;
        that.grid_title=bigPoint.title;
        that.main_id=bigPoint.main_id;

        console.log('that.gid :',that.gid );
        console.log('that.grid_title :',that.grid_title);
        console.log('that.main_id:',that.main_id );
        that.$http.get("/api/GriderPcApi/getGriderZInfo?id="+that.main_id,null,r=>{
          // console.log("网格长数据为：",r.data)
          that.newGrider=r.data;
          that.firstGrid=r.data;
        });
        that.$http.get("/api/GriderPcApi/getGriderYList?id="+that.main_id,null,r=>{
          console.log('网格员信息',r.data);
          that.gird_yuan=r.data;
          that.firstGirdyuan=r.data;
        });
        that.$http.get("/api/DataCenterApi/getMemberTotal?vollege_id="+that.$util.vollege_id+"&grider_id="+that.main_id,null,r=>{
          that.home=r.data;
        });
        that.$http.get("/api/DataCenterApi/getMemberSex?vollege_id="+that.$util.vollege_id+"&grider_id="+that.main_id,null,r=>{
          that.sex=r.data;
        });


      },

      closePopup(){
        this.flag = false
      },

      closeSubPopup(){
        this.sub_flag = false
      },

      closePeoplePopup(){
        this.new_flag=false;
        this.people_flag = false
        this.people_flags= false
      },

      HiddenMask(){
        console.log('关闭弹窗！');
        this.flag = false;
        this.sub_flag = false;
        this.people_flag = false;
      },

      // 查看下一级
      onNextLevel(id){
        console.log(id)
        let that = this;
        that.$http.get("api/GriderPcApi/getGriderYList?id=" + id, null, r=>{
          console.log("网格长信息", r.data);
          that.flag = false;

          if (r.data.length > 0) {

            that.sub = r.data;
            that.sub_flag = true;

          } else { // 请求家庭信息
            that.$http.get("api/GriderPcApi/getGriderHomeList?id=" + id + "&vollege_id=" + that.$util.vollege_id, null, k=>{

              console.log("家庭信息", k);
              that.people_flag = true;
              that.people = k.data;

              if (that.people.length > 0) {
                that.titles = that.people[0].catList
              }


            })
          }
        });
      },

      openInfoWindow(param){

        console.log("param", param)

        let bigPoint = param.bigPoint;
        let center = param.center;
        let points = param.points;
        let color = param.color;

        this.leftMapStatus = 999;
        this.loadLeftMap(center, points, color,bigPoint);

        // let that = this;
        // that.$http.get("api/GriderPcApi/getGriderZInfo?id=" + main_id, null, r=>{
        //   console.log("网格长信息", r.data);
        //   that.mainInfo = r.data;
        //   that.flag = !that.flag;
        // });
        //         this.son_flag=false;
        //         this.nodata=false;
        //         this.work_staus=true;
        //         this.new_flag = true;
        // this.getLimitMenu(main_id);
        let that = this;
        console.log("bigPoint:",bigPoint);
        that.click_flag=true;
        that.first_flag=false;
        that.nonextLevel=false;

        that.gid = bigPoint.id;
        that.grid_title=bigPoint.title;
        that.main_id=bigPoint.main_id;

        console.log('that.gid :',that.gid );
        console.log('that.grid_title :',that.grid_title);
        console.log('that.main_id:',that.main_id );
        that.$http.get("/api/GriderPcApi/getGriderZInfo?id="+that.main_id,null,r=>{
          // console.log("网格长数据为：",r.data)
          that.newGrider=r.data;
          that.firstGrid=r.data;
        });
        that.$http.get("/api/GriderPcApi/getGriderYList?id="+that.main_id,null,r=>{
          console.log('网格员信息',r.data);
          that.gird_yuan=r.data;
          that.firstGirdyuan=r.data;
        });

        that.$http.get("/api/DataCenterApi/getMemberTotal?vollege_id="+that.$util.vollege_id+"&grider_id="+that.main_id,null,r=>{
          that.home=r.data;
        });
        that.$http.get("/api/DataCenterApi/getMemberSex?vollege_id="+that.$util.vollege_id+"&grider_id="+that.main_id,null,r=>{
          that.sex=r.data;
        });

      },

      switechTab(index){
        this.tabative=index;
        if (index==0) {
          this.baseFlag=true;
          this.renflag=false;
        }else if (index==1) {
          this.renflag=true;
          this.baseFlag=false;
            let that =this;
            console.log('查看人员信息！');
            that.$http.get("/api/DataCenterApi/getMemberTotal?vollege_id="+that.$util.vollege_id+"&grid_id="+that.gid,null,r=>{
              that.home=r.data;
            });
            that.$http.get("/api/DataCenterApi/getMemberSex?vollege_id="+that.$util.vollege_id+"&grid_id="+that.gid,null,r=>{
              that.sex=r.data;
            });
            that.$http.get("/api/DataCenterApi/importantMemberCount?vollege_id="+that.$util.vollege_id+"&grid_id="+that.gid,null,r=>{
              that.keygroups=r.data;
              console.log('重点人群数量：',that.keygroups);
              if (r.data.length==0) {
                that.nodataRen=true;
              }else {
                that.nodataRen=false;
              }
            });


        }
      },

      firstLoadHomeMessage(){

        let that = this;
        that.$http.get("/api/DataCenterApi/getMemberTotal?vollege_id="+that.$util.vollege_id,null,r=>{
          that.total_home=r.data;
        });
        that.$http.get("/api/DataCenterApi/getMemberSex?vollege_id="+that.$util.vollege_id,null,r=>{
          that.total_sex=r.data;
        });
        // that.$http.get("/api/DataCenterApi/importantMemberCount?vollege_id="+that.$util.vollege_id,null,r=>{
        //   that.keygroups=r.data;
        //   console.log('重点人群数量：',that.keygroups);
        //   if (r.data.length==0) {
        //     that.nodataRen=true;
        //   }else {
        //     that.nodataRen=false;
        //   }
        //
        // });

      },//第一次加载村级信息的重点人群

      checkKeysDetail(item){
        console.log('查看重点人群详情：',item);

        let that = this;
        that.$http.get("/api/GriderPcApi/importantMemberDetail?vollege_id="+that.$util.vollege_id+"&tags_id="+item.tags_id+"&grid_id="+that.gid,null,r=>{
          console.log('获得的人员信息查看详情数据为：',r);
          that.keyDetails=r.data;
          that.keydetailflag=true;
        });

      },//点击了查看重点人群详情

      checkKeysDetail2(item){
        console.log('查看重点人群详情：',item);

        let that = this;
        that.$http.get("/api/GriderPcApi/importantMemberDetail?vollege_id="+that.$util.vollege_id+"&tags_id="+item.tags_id+"&grid_id="+that.gid,null,r=>{
          console.log('获得的人员信息查看详情数据为：',r);
          that.keyDetails=r.data;
          that.keydetailflag=true;
        });





      },//点击了查看重点人群详情



      stopKeyDetail(){
        this.keydetailflag=false;
      },


      checkGirdermore(item){
        let that = this;
        that.newGrider=item;

        console.log('查看人员信息！');
        that.$http.get("/api/DataCenterApi/getMemberTotal?vollege_id="+that.$util.vollege_id+"&grider_id="+item.id,null,r=>{
          that.home=r.data;
        });
        that.$http.get("/api/DataCenterApi/getMemberSex?vollege_id="+that.$util.vollege_id+"&grider_id="+item.id,null,r=>{
          that.sex=r.data;
        });

        that.$http.get("/api/GriderPcApi/getGriderYList?id="+item.id,null,r=>{
          if (r.data.length==0) {
            that.gird_yuan=[];//如果没有网格下的对象，则为空
            that.pid=item.pid;//变换pid的数值
            that.nonextLevel=true;//显示暂无更多网格
            that.gridCheckDetail(item);
            return
          }else {
            that.gird_yuan=r.data;
            that.pid=r.data.pid;//变换pid的数值
            that.nonextLevel=false;
          }
        });
      },//查看是否有更多网格对象

      gridCheckDetail(item){

        let that =this;
        that.homeFlag=false;
        that.$http.get("/api/GriderPcApi/getGriderHomeList?id="+item.id+"&vollege_id="+that.$util.vollege_id,null,r=>{
          console.log('查看网格家庭详情为：',r.data);
          that.people=r.data;
          if (r.data.length==0) {
              that.homeFlag=true;
          }
          if (that.people.length > 0) {
            that.titles = that.people[0].catList;
          }
        });

        // this.people_flags=true;//关闭查看信息

      },//查看网格走访对象

      GoBack(){
         console.log('点击了返回按钮！');
         let that = this;
         that.nonextLevel=false;
         if (that.pid==null) {
           console.log('为最顶级！',that.pid);
             that.newGrider=that.firstGrid;
             that.gird_yuan=that.firstGirdyuan;
           that.$http.get("/api/DataCenterApi/getMemberTotal?vollege_id="+that.$util.vollege_id+"&grider_id="+that.main_id,null,r=>{
             that.home=r.data;
           });
           that.$http.get("/api/DataCenterApi/getMemberSex?vollege_id="+that.$util.vollege_id+"&grider_id="+that.main_id,null,r=>{
             that.sex=r.data;
           });
           console.log('点击到了最后！');
         }else {
           console.log('存在下一级！',that.pid);

           that.$http.get("/api/DataCenterApi/getMemberTotal?vollege_id="+that.$util.vollege_id+"&grider_id="+that.pid,null,r=>{
             that.home=r.data;
           });
           that.$http.get("/api/DataCenterApi/getMemberSex?vollege_id="+that.$util.vollege_id+"&grider_id="+that.pid,null,r=>{
             that.sex=r.data;
           });

           that.$http.get("/api/GriderPcApi/getGriderYList?id="+that.pid,null,r=>{
               that.gird_yuan=r.data;
               that.pid=r.data.pid;//变换pid的数值
               that.nonextLevel=false;
           });

           that.$http.get("/api/GriderPcApi/getGriderZInfo?id="+that.pid,null,r=>{
             // console.log("网格长数据为：",r.data)
             that.newGrider=r.data;
           });
         }

      },//返回上一级
    }
  }
</script>

<style scoped>
  .map_box {
    height: 100%;
    width: 100%;
  }

  #mapDiv,
  #mapLeft
  {
    height: 100%;
    width: 100%;
  }

  .show {
    position: fixed;
    height: 433px;
    width: 336px;
    background: white;
    top: 28%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    box-shadow: 4px 4px 16px #cccccc;
    left: 850px;
  }
  .show_box_contain{
    height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;

  }
  .show_box{
    height: 360px;
    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    margin-bottom: 10px;
    overflow-y: scroll;
  }

  .headimg{
    width: 150px;
    height: 210px;
  }

  .map_box>>>.tdt-infowindow-tip-container {
    background-image: url("/static/marker.png");
  }

  .map_box>>>.tdt-infowindow-tip-container{
    width: 45px;
    height: 73px;
  }

  .map_box>>>.tdt-marker-pane{
    z-index: 1000;
  }

  .map_box>>>.tdt-marker-icon{
    border-radius: 25px;
  }

  .map_box>>>.tdt-infowindow-close-button{
    display: none;
  }
  .map_box>>>.tdt-container .tdt-control-copyright, .tdt-container .tdt-control-scale {
    display: none;
  }

  .map_box >>>.tdt-infowindow-content-wrapper, .tdt-infowindow-tip {
    background: #fff;
    color: #333;
    box-shadow: 0 3px 14px rgba(0,0,0,.4);
    border-radius: 8px;
  }



  .cunmin{
    width: 1120px;
    padding: 20px;
    background-color: #fff;
    display: block;
    overflow: auto;
    height: 600px;
    left: 850px;
    z-index: 1009;
  }

  .closeCunmin{
    right: 24px;
    top: 9px;
    font-size: 38px;
    cursor: pointer;
  }
  .cm_title{
    font-size: 30px;
    color: black;
    font-family: 微软雅黑;
    font-weight: bold;
  }
  .title_tr{
    font-size: 26px;
    color: black;
    font-family: 微软雅黑;
    font-weight: bold;
    border:none;
  }
  .table_data_color{
    color: #29be74;
    border: none;
    box-sizing: border-box;
    padding-left: 33px;
  }
  .jiating{
    color: black;
    border: none;
  }
  tr{
    height: 60px;
  }

  .mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0,0,0, 0.3);
  }


  table tbody {
    display: block;
    height: 435px;
    overflow-y: scroll;
  }

  table thead,
  tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  table thead {
    width: calc( 100% - 1em)
  }

  table thead th {
    background: #ccc;
  }

  .title_tr:last-child{
    padding-left: 47px;
  }





  /*新的设计逻辑样式*/





  .new_dialog_box{
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    background: rgba(204,204,204,0.7);
    z-index: 1001;
  }
  .new_dialog{
    width: 1376px;
    /*height: 933px;*/
    height: 790px;
    background: white;
    position: fixed;
    z-index: 1002;
    left: 50%;
    transform: translateX(-50%);
    top: 11%;
    border-radius: 10px;
    /*display: flex;*/
    flex-direction: column;
  }
  .new_dialog_top{
    /*flex: 1;*/
    height: 70px;
    border-bottom: 3px solid #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
  }
  .gird_manager_title{
    font-size: 30px;
    color: black;
    font-family: 微软雅黑;
    font-weight: bold;
  }
  .close_new_dialog{
    font-size: 50px;
    color: black;
    position: fixed;
    right: 30px;
    top: 720px;
  }
  .new_dialog_bottom{
    height: 863px;
    display: flex;
  }
  .new_dialog_left{
    width: 160px;
  }
  .new_dialog_center{
    height: 745px;
    /*height: 100%;*/
    flex: 1;
    overflow-y: scroll;
    /*overflow-x: scroll;*/
    /*text-align: center;*/
    box-sizing: border-box;
    padding-top: 20px;
  }
  .new_dialog_right{
    width: 160px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    align-items: center;
    justify-content: flex-start;
  }
  .new_girds{
    height: 42px;
    width: 120px;
    background: #02c070;
    color: white;
    border-radius: 8px;
    margin-bottom: 10px;
    text-align: center;
    line-height: 42px;
    font-size: 16px;
    font-family: 微软雅黑;
  }
  .girdWorkMessage{
    height: 657px;
    width: 969px;
    background: white;
    position: fixed;
    z-index: 1004;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 20%;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
  }
  .gwm_top{
    height: 83px;
    border-bottom: 3px solid #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
  }
  .gwm_bottom{
    flex: 1;
    box-sizing: border-box;
    padding: 20px;
    font-size: 20px;
    color: #575757;
  }
  .fade_color{
    background: rgba(204,204,204,0.7);
  }





  .row_box{
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 200px;
  }
  .row{
    box-sizing: border-box;
    height: 275px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .row_grider{
    height: 238px;
    width: 183px;
    border: 1px solid #f9f9f9;
    box-shadow: 4px 4px 16px #909090;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-content: space-evenly;*/
  }
  .role{
    height: 30px;
    width: 70px;
    border: 1px solid #02c070;
    border-radius: 8px;
    color: #02c070;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
  }
  role_max{
    height: 30px;
    width: 70px;
    border: 1px solid #12a6e4;
    border-radius: 8px;
    color: #12a6e4;
    font-size: 14px;
    line-height: 30px;
    text-align: center;
  }

  .pic{
    /*height: 78px;*/
    /*width: 78px;*/
    height: 200px;
    width: 150px;
    margin-top: 15px;
    /*border-radius: 50%;*/
  }
  .nick_name{
    font-size: 20px;
    color: black;
    font-family: 微软雅黑;
    font-weight: bold;
  }
  .mobile{
     font-size:21px;
     color: #777777;

  }
  .check_button{
    width: 150px;
    height: 40px;
    background: #02c070;
    color: white;
    font-size: 18px;
    font-family: 微软雅黑;
    border-radius: 30px;
    text-align: center;
  }
  .row2{
    box-sizing: border-box;
    /*height: 275px;*/
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }
  .two_inner{
    /*margin-right: 105px;*/
    margin-bottom: 20px;
  }
  .two_inner:nth-child(4n+0){
   /*margin-right: 0px;*/
  }

  .cunmins{
    height: auto;
    padding-left: 20px;
    padding-top: 10px;
  }


  .cunmins tbody{
    height: 675px;
  }


  .map_box>>>.tdt-infowindow-content{
    margin: 0px!important;
  }




  .new_gird{
    /*height: 500px;*/
    width: 400px;
    position: fixed;
    z-index: 999;
    right: 422px;
    top: 433px;
    display: flex;
    flex-direction: column;
    background: white;
    box-shadow: 0px 3px 14px rgba(0,0,0,.4);
    /*border: 1px solid #cccccc;*/
    border-radius: 12px;
    /*overflow: hidden;*/
  }
  .new_gird_tab{
    height: 50px;
    border-bottom: 1px solid #cccccc;
    display: flex;
  }
  .tabs{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tab{
    width: 100px;
    height: 40px;
    background: white;
    color: black;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    font-family: "Adobe 黑体 Std R";
    font-weight: bold;
  }
  .active_tab{
    /*background: #00baff;*/
    background: var(--activeColor)!important;
    color: white;
    border-radius: 8px;
  }

  .new_gird_message{
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .message_top{
       flex: 1;
       display: flex;
  }




  .top_left{
       flex: 0.8;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;

  }
  .left_data{
    font-size: 12px;
    color: black;
    font-family: 微软雅黑;
    padding-left: 24px;
    font-weight: bold;
  }

  .top_right{
      flex: 0.8;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      box-sizing: border-box;
  }

  .top_center{
    flex: 0.6;
    display: flex;
    justify-content: flex-start;
    align-items: center;

  }
  .message_bottom{
       flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .grids_list{
    height: 270px;
    overflow: hidden;
    width: 90%;
    background: white;
    border-radius: 8px;
    box-shadow: 0px 3px 14px rgba(0,0,0,.4);
    /*border: 1px solid #cccccc;*/
    display: flex;
    flex-direction: column;
  }
  .subject{
    height: 44px;
    font-weight: bold;
    font-family: 微软雅黑;
    font-size: 16px;
    display: flex;
    border-bottom: 1px solid #cccccc;
  }
  .col{
    flex: 1;
    text-align: center;
  }
  .subject_body{
    flex: 1;
    overflow-y: scroll;
  }
  .row{
    height: 44px;
    display: flex;
    font-family: 微软雅黑;
    font-size: 12px;

  }
  .col2{
    flex: 1;
    text-align: center;
  }

  .total{
    height: 100px;
    display: flex;
    flex-direction: column;
  }
  .total_top{
    flex: 1;
    display: flex;


  }
  .total_top_left{
    text-align: left;
    flex: 1;
    font-size: 14px;
    font-family: 微软雅黑;
    font-weight: bold;
  }
  .total_text{
    box-sizing: border-box;
    padding-left: 46px;
  }
  .total_top_right{
    text-align: left;
    flex: 1;
    font-size: 14px;
    font-family: 微软雅黑;
    font-weight: bold;
  }
  .total_bottom{
    flex: 1;
    display: flex;

  }
  .keys{
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .key_details_list{
    position: fixed;
    z-index: 1000;
    background: white;
    left: 429px;
    top: 269px;
    height: 600px;
    width: 870px;
    border-radius: 8px;
    /*border: 1px solid #cccccc;*/
    box-shadow: 0px 3px 14px rgba(0,0,0,.4);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  .key_details_list_top{
    display: flex;
    height: 44px;
  }
  .d_col{
    flex: 1;
    text-align: center;
    font-size: 24px;
    font-family: 微软雅黑;
    font-weight: bold;
  }
  .d_col1{
    flex: 1;
    text-align: center;
    font-size: 16px;
    color: black;
    font-family: 微软雅黑;
  }
  .key_details_list_bottom{
    flex: 1;
    overflow-y: scroll;
  }
  .row{
    height: 44px;
    width: 100%;
    display: flex;
  }
  .check_detail_color{
    color: var(--activeColor);
  }
.gird_table{
  font-size: 12px;
      color: black;
      font-family: 微软雅黑;
      padding-left: 24px;
      font-weight: bold;
}
.gird_table tr{
  border: 1px solid #d6d6d6;
  height: 43px;
  margin-top: -1px;
}
.gird_table td{
  font-size: 12px;
  border: 1px solid #d6d6d6;
  text-align: center;
}

  .mapLeft{
    position: absolute;
    /*width: 500px;*/
    /*height: 500px;*/
    height: 400px;
    width: 400px;
    box-shadow: 0px 3px 14px rgba(0,0,0,.4);
    /*background: red;*/
    z-index: 999;
    left: 31px;
    top: 61px;
  }

  .total_all_groups{
    width: 300px;
    height: 83px;
    background: white;
    position: fixed;
    z-index: 998;
    top: 268px;
    left: 181px;
    box-shadow: 0px 3px 14px rgba(0,0,0,.4);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    font-family: 微软雅黑;
  }
  .total_all_top{
    flex: 1;
    display: flex;
  }
  .total_all_bottom{
    flex: 1;
    display: flex;

  }
  .tatal_all_left{
    flex: 1;
    color: black;
    /*font-weight: bold;*/
  }
  .tatal_all_right{
    flex: 1;
    color: black;
    /*font-weight: bold;*/
  }
  .pd{
    padding-left: 10px;
  }




</style>
